<template>
  <div>
    <el-table :data="pageData" v-loading="loading" stripe :header-cell-style="tableHeaderStyle">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img :src="baseImgUrl + scope.row.headUrl" class="shop_avator" v-if="scope.row.headUrl">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="昵称"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="createTime" label="邀请时间"></el-table-column>
      <el-table-column prop="inviteMoney" label="贡献总收益"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showDetail(scope.row)" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center margin_top_20">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
    </div>
  </div>
</template>

<script>
  import Setting from '@/settings';
  import { GetSharedSharerOneInvite } from  '@/views/shared-management/services/index';
  export default {
    data() {
      return {
        pageData: [],
        pageCount: 0,
        pageIndex: 1,
        loading: false,
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,
        baseImgUrl: process.env.VUE_APP_FILE_URL
      }
    },
    created() {
      this.getPageDataList();
    },
    methods:{
      getPageDataList() {
        this.loading = true;
        GetSharedSharerOneInvite({
          pageSize: this.pageSize,
          pageNum: this.pageIndex,
          userId: this.$route.query.id
        })
        .then(res => {
          if (res.code == 200) {
            this.pageData = res.data.list;
            this.pageCount = res.data.total;
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
      },
      // 分页操作
      handlePagingChange(event) {
        this.pageIndex = event;
        this.getPageDataList();
      },
      handleSizeChange(event) {
        this.pageIndex = 1;
        this.pageSize = event;
        this.getPageDataList();
      },
      showDetail(row) {
        this.$emit('show', row.inviteeId);
      }
    }
  }
</script>

<style scoped lang="scss">
.shop_avator {
  width: 64px;
  height: 64px;
  vertical-align: middle;
}
</style>
